<template>
  <div>
    <headers></headers>
    <div class="ggbgc" v-loading="loading">
      <div class="newlist min-width width">
        <router-link @click.native="brandgo('/brand')" to="/brand" class="newlist-title">
          <p class="el-icon-arrow-left"></p>
          <span class="newlist-title-span">{{$t('message.Newslist')}}</span>
        </router-link>
        <div class="newlist-content clear">
          <div class="newlist-content-left fl">
            <div @click="newsdetailid('/newdetails?newid='+item.id,item.id)" class="newlist-content-list clear"
                 v-for="item in newlist" :key="item.id">
              <div class="list-img" :style="{backgroundImage: 'url('+ item.img_src +')'}"></div>
              <div class="list-bottom">
                <p class="list-bottom-title">{{item.title}}</p>
                <div class="list-bottom-content">{{item.content}}</div>
              </div>
              <div class="el-icon-arrow-right fr"></div>
            </div>
          </div>
          <div class="newlist-content-right fr">
            <p class="right-title">{{$t('message.Hotrecommended')}}</p>
            <div  @click="newsdetailid('/newdetails?newid='+item.id,item.id)"
                 class="right-list clear" v-for="item in groomlist" :key="item.id">
              <div class="right-list-img fl" :style="{backgroundImage:'url('+ item.img_src +')'}"></div>
              <div class="right-list-content fl">{{item.title}}</div>
            </div>
          </div>
        </div>
        <div v-if="paging">
          <el-pagination  background layout=" prev, pager, next" @current-change="handleCurrentChange"
                         :page-size="pagesize" :total="totalCount" :current-page="currentPage">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios"
  import headers from "@/components/public/header"

  export default {
    components: {
      headers
    },
    name: 'newlist',
    data() {
      return {
        lang:'en',
        totalCount: 0,  //总条数
        currentPage: 1, //初始页
        pagesize: 3,  //  每页的数据
        nums: 4,       //热点推荐显示条数
        newlist: [],
        groomlist: [],
        loading: true, //加载
        paging:true,  //
      }
    },
    created() {
      if (sessionStorage.sitename) {
        this.lang =  sessionStorage.sitename;
      }
      this.init();
      this.groom();
    },
    methods: {
      // 请求新闻列表
      init() {
        axios.get('news/api/get_news', {
          params: {
            page: this.currentPage,
            limit: this.pagesize,
            language: this.lang
          }
        })
          .then((response) => {
            var data = response.data.list.data;
            this.newlist = data;
            this.totalCount = response.data.list.total;
            this.loading = false;
            if(this.totalCount > 3){
              this.paging = true;
            }else {
              this.paging = false;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 请求热门推荐
      groom() {
        axios.get('news/api/get_hot_news', {
          params: {
            limit: this.nums,
            language: this.lang
          }
        }).then((response) => {
          this.groomlist = response.data.list;
          this.loading = false;
        })
          .catch(function (error) {
            console.log(error);
          });
      },
      //传参到新闻详情
      newsdetailid(url,id) {
        sessionStorage.url = JSON.stringify(url);
        this.$router.push({
          name: 'newdetails',
          query: {
            newid: id
          }
        })
      },
      // element ui分页器获取当前页数
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.init();
      },
      brandgo(url){
        sessionStorage.url = JSON.stringify(url)
      }
    },
  }
</script>
<style scoped>
  .newlist {
    padding-bottom: 66px;
  }

  .newlist .newlist-title {
    display: block;
    cursor: pointer;
    padding-top: 48px;
  }

  .newlist .newlist-title .newlist-title-span {
    margin-left: 6px;
    font-size: 20px;
    color: #010101;
  }

  .newlist .newlist-title .el-icon-arrow-left {
    font-size: 20px;
    color: #9a9a9a;
    font-weight: bold;
  }

  .newlist .newlist-content {
    margin-top: 20px;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list {
    padding: 22px 24px 19px 19px;
    background: #fff;
    margin-bottom: 2px;
    cursor: pointer;
    display: block;
  }
  .newlist .newlist-content .newlist-content-left .newlist-content-list:hover{
    box-shadow: 0 0 3px #888888;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list .list-img {
    width: 707px;
    height: 295px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list .list-img img {
    width: 100%;
    min-height: 100%;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list .list-bottom {
    width: 707px;
    padding-right: 28px;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list .list-bottom .list-bottom-title {
    margin-top: 20px;
    font-size: 20px;
    color: #020202;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list .list-bottom .list-bottom-content {
    font-size: 14px;
    margin-top: 18px;
    line-height: 20px;
    color: #999999;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2;
  }

  .newlist .newlist-content .newlist-content-left .newlist-content-list .el-icon-arrow-right {
    font-size: 20px;
    color: #9a9a9a;
    padding-right: 28px;
    margin-top: 20px;
    font-weight: bold;
  }

  .newlist .newlist-content .newlist-content-right {
    width: 420px;
    background: #fff;
    padding-top: 20px;
  }

  .newlist .newlist-content .newlist-content-right .right-title {
    font-size: 18px;
    color: #010101;
    margin-bottom: 10px;
    margin-left: 20px;
  }

  .newlist .newlist-content .newlist-content-right .right-list {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-top: 20px;
    height: 133px;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
  }

  .newlist .newlist-content .newlist-content-right .right-list:hover {
    background: #e8e8e8;
  }

  .newlist .newlist-content .newlist-content-right .right-list:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  .newlist .newlist-content .newlist-content-right .right-list .right-list-img {
    width: 92px;
    height: 92px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .newlist .newlist-content .newlist-content-right .right-list .right-list-content {
    font-size: 14px;
    width: 260px;
    max-height: 40px;
    line-height: 20px;
    margin-top: 25px;
    margin-left: 30px;
    overflow: hidden;
    color: #000000;
    text-overflow: ellipsis;
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2;
    overflow: hidden;
  }

</style>
